<!-- 图标库选择组件 -->
<template>
  <div class="regionSelect">
    <el-form :model="form" :rules="rules" label-width="0" inline>
      <el-form-item prop="province">
        <el-select v-model="form.province" :size="size" placeholder="请选择省" clearable @change="provinceChange">
          <el-option v-for="item in provinceList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item >
      <el-form-item prop="city">
        <el-select v-model="form.city" :size="size" placeholder="请选择市" clearable @change="cityChange">
          <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="county">
        <el-select v-model="form.county" :size="size" placeholder="请选择区县" clearable @change="countyChange">
          <el-option v-for="item in countyList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
  import { getRegion } from '../../api/api'
  import { reactive, toRefs, watch } from 'vue'

  // 定义父组件传入的值
  const props = defineProps({
    modelValue: Array,
    size: {
      type: String,
      default: 'default'
    },
  })
  // 定义传值给父组件数据方法
  const emits = defineEmits(['update:modelValue'])

  const currentData = reactive({
    form: {
      province: '',
      city: '',
      county: '',
    },
    provinceList: [
      {label: '省份', value: '1'}
    ],
    cityList: [
      {label: '城市', value: '2'}
    ],
    countyList: [
      {label: '区县', value: '3'}
    ],
    rules: {
      province: [{ required: true, message: '请选择省', trigger: ['blur', 'change'] }],
      city: [{ required: true, message: '请选择市', trigger: ['blur', 'change'] }],
      county: [{ required: true, message: '请选择区县', trigger: ['blur', 'change'] }]
    }
  })
  let {form, provinceList, cityList, countyList} = toRefs(currentData)

  console.log('props.modelValue', props.modelValue);

  // 设置初始值
  function init() {
    if(props.modelValue.length === 0) {
      return
    }
    if(props.modelValue.length === 1) {
      currentData.form.province = props.modelValue[0]
      return
    }
    if(props.modelValue.length === 2) {
      currentData.form.province = props.modelValue[0]
      currentData.form.city = props.modelValue[1]
      return
    }
    if(props.modelValue.length === 3) {
      currentData.form.province = props.modelValue[0]
      currentData.form.city = props.modelValue[1]
      currentData.form.county = props.modelValue[2]
    }
  }
  init()

  // watch(() => props.modelValue, (newVal) => {
  //   currentData.active = newVal
  // }, {
  //   immediate: true // 立即监听
  // })


  function load(id) {

  }

  function provinceChange(e) {
    let chooseRegion = []
    if(e) {
      chooseRegion.push(e)
    } else {
      currentData.city = ''
      currentData.county = ''
    }
    emits('update:modelValue', chooseRegion)
  }

  function cityChange(e) {
    let chooseRegion = []
    chooseRegion.push(currentData.province)
    if(e) {
      chooseRegion.push(e)
    } else {
      currentData.county = ''
    }
    emits('update:modelValue', chooseRegion)
  }

  function countyChange(e) {
    let chooseRegion = []
    chooseRegion.push(currentData.province)
    chooseRegion.push(currentData.city)
    if(e) {
      chooseRegion.push(e)
    }
    emits('update:modelValue', chooseRegion)
  }
</script>

<style lang="less" scoped>
.regionSelect {
  :deep(.el-form){
    display: flex;
    justify-content: space-between;
    .el-form-item{
      width: 32%;
      margin: 0 !important;
      :deep(.el-select){
        width: 100%;
      }
    }
  }
}
</style>